<template>
	<view class="wanl-comment">
		<view class="edgeInsetTop"></view>

		<view class="subject margin-lr-bj bg-white radius-bock margin-bottom-bj" v-for="(vo,index) in goods_comment"
			:key="index">
			<view class="goods padding-bj">
				<view class="cu-avatar radius-bock"
					:style="{ backgroundImage: 'url(' + $wanlshop.oss(vo.good_img, 40,40) + ')' }"></view>
				<view class="content">
					<view class="text-lg text-cut">
						<text>{{vo.good_name}}</text>
					</view>
					<view class="wanl-gray-dark">{{vo.good_sku}}</view>
				</view>
			</view>
			<view class="comment padding-lr-bj padding-top-bj">
				<view class="comment-title">宝贝评价</view>
				<view class="comment-operate">
					<div class="aui-text-left" style="flex: 1;">
						<img tapmode @click="vo.star_num=1" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars1.png" />
						<img v-if="vo.star_num<2" tapmode @click="vo.star_num=2" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars2.png" />
						<img v-if="vo.star_num>1" tapmode @click="vo.star_num=2" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars1.png" />

						<img v-if="vo.star_num<3" tapmode @click="vo.star_num=3" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars2.png" />
						<img v-if="vo.star_num>2" tapmode @click="vo.star_num=3" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars1.png" />

						<img v-if="vo.star_num<4" tapmode @click="vo.star_num=4" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars2.png" />
						<img v-if="vo.star_num>3" tapmode @click="vo.star_num=4" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars1.png" />

						<img v-if="vo.star_num<5" tapmode @click="vo.star_num=5" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars2.png" />
						<img v-if="vo.star_num>4" tapmode @click="vo.star_num=5" class="icon-fav"
							src="https://zm.zonmay.com/public/static/image/icons/stars1.png" />


						<span v-if="vo.star_num>3" class="aui-font-size-13"
							style="margin-left:15px;float:right;margin-top:0.25rem;color:#4D4D4D">非常好</span>
						<span v-if="vo.star_num>1&&vo.star_num<4" class="aui-font-size-13"
							style="margin-left:15px;float:right;margin-top:0.25rem;color:#4D4D4D">还不错</span>
						<span v-if="vo.star_num<2" class="aui-font-size-13"
							style="margin-left:15px;float:right;margin-top:0.25rem;color:#4D4D4D">很一般</span>
					</div>
				</view>
			</view>
			<view class="describe cu-form-group margin-bj radius-bock padding-bj">
				<textarea maxlength="-1" v-model="vo.content" placeholder="评价下商品~"></textarea>
			</view>
			<view class=""></view>
			<view class="upload cu-form-group padding-lr-bj">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index1) in images" :key="key" @tap="viewImage(index1,key)">
						<image :src="$wanlshop.oss(item, 40,40)" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index1, key)"><text
								class="wlIcon-31guanbi"></text></view>
					</view>
					<view class="solids" @tap="chooseImage(index)" v-if="images.length < 4">
						<text class="wlIcon-tupian1"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="operate margin-bj padding-bj bg-white radius-bock">
			<view class="operate-title" @tap="onShop(shop.id)">
				<text class="wlIcon-dianpu1 margin-right-sm"></text>
				{{shop.shopname}}
			</view>
			<view class="score">
				<view class="title">描述相符</view>
				<wanl-rate :quantity="5" :current="shop.describe" :size="25" normal="#cad0cc" active="#ff4e02" :hollow="true" @change="describeChange" />
				<view class="margin-left wanl-gray-light">
					{{shop.describeInfo}}
				</view>
			</view>
			<view class="score">
				<view class="title">物流服务</view>
				<wanl-rate :quantity="5" :current="shop.logistics" :size="25" normal="#cad0cc" active="#ff4e02" :hollow="true" @change="logisticsChange" />
				<view class="margin-left wanl-gray-light">
					{{shop.logisticsInfo}}
				</view>
			</view>
			<view class="score">
				<view class="title">发货速度</view>
				<wanl-rate :quantity="5" :current="shop.service" :size="25" normal="#cad0cc" active="#ff4e02" :hollow="true" @change="serviceChange" />
				<view class="margin-left wanl-gray-light">
					{{shop.serviceInfo}}
				</view>
			</view>
			<view class="score">
				<view class="title">服务态度</view>
				<wanl-rate :quantity="5" :current="shop.deliver" :size="25" normal="#cad0cc" active="#ff4e02" :hollow="true" @change="deliverChange" />
				<view class="margin-left wanl-gray-light">
					{{shop.deliverInfo}}
				</view>
			</view>
		</view> -->
		<view class="edgeInsetBottom"> </view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="addData()"
				class="cu-btn wanl-bg-orange lg">发布评论</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: 0,
				shop: {
					id: 0,
					shopname: '',
					describe: 0,
					describeInfo: '',
					logistics: 0,
					logisticsInfo: '',
					service: 0,
					serviceInfo: '',
					deliver: 0,
					deliverInfo: ''
				},
				goodsList: [],
				goods_comment: [],
				images:[],
				img_pic:[]
			};
		},
		onLoad(option) {
			// this.loadData(option.order_id);
			this.order_id = option.order_id;
			this.goods_comment = JSON.parse(option.data);
			console.log(this.goods_comment)
		},
		methods: {
			// 提交评论
			async addData() {
				// 判断是否给店铺评分，其他可以不填写，默认好评
				// if (this.shop.describe == 0 || this.shop.logistics == 0 || this.shop.service == 0 || this.shop.deliver == 0) {
				// 	this.$wanlshop.msg('请给店铺评分');
				// 	return false;
				// }
				
				let data = {
					token: uni.getStorageSync("wanlshop:user").token,
					order_id: this.order_id,
					shop: {
						id: this.shop.id,
						describe: this.shop.describe,
						logistics: this.shop.logistics,
						service: this.shop.service,
						deliver: this.shop.deliver
					},
					comment: JSON.stringify(this.goods_comment)
				};

				await uni.request({
					url: '/api/Good/sendGoodComment',
					method: 'POST',
					data: data,
					success: res => {
						console.log(res)
						this.$wanlshop.msg('发布成功')
						this.$store.commit('statistics/order', {
							evaluate: this.$store.state.statistics.order.evaluate - 1
						});
						this.$wanlshop.to('/pages/page/success?type=comment');
					}
				});
			},
			stateType(type, index) {
				this.goodsList[index].state = type;
			},
			viewImage(index, key) {
				uni.previewImage({
					urls: this.goodsList[index].imgList,
					current: this.goodsList[index].imgList[key]
				});
			},
			delImg(index, key) {
				this.images.splice(key, 1);
			},
			chooseImage(index) {

				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 4 - this.images.length,
					success: res => {

						for (let i = 0; i < res.tempFilePaths.length; i++) {
							// 读取图片宽高
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: image => {
									uni.uploadFile({
										url: 'https://zm.zonmay.com/api/UpFiles/uploadimg',
										filePath: image.path,
										name: 'file',
										formData: null,
										success: res => {
											// console.log(JSON.parse(res.data))

											this.images.push(JSON.parse(res
												.data).data.url);
												
											this.goods_comment[index].img.push(JSON.parse(res
												.data).data.pic_id);
											this.goods_comment[index].imgpath.push(JSON.parse(res
												.data).data.url);
											
										},
										fail: error => {
											this.$wanlshop.msg(JSON.parse(error.data)
												.msg);
										}
									});
								}
							});
						}
					}
				})


				
			},
			describeChange(e) {
				this.shop.describe = e.index;
				this.shop.describeInfo = this.scoreInfo(e.index);
			},
			logisticsChange(e) {
				this.shop.logistics = e.index;
				this.shop.logisticsInfo = this.scoreInfo(e.index);
			},
			serviceChange(e) {
				this.shop.service = e.index;
				this.shop.serviceInfo = this.scoreInfo(e.index);
			},
			deliverChange(e) {
				this.shop.deliver = e.index;
				this.shop.deliverInfo = this.scoreInfo(e.index);
			},
			scoreInfo(index) {
				if (index == 1) {
					return '极差';
				} else if (index == 2) {
					return '差';
				} else if (index == 3) {
					return '一般';
				} else if (index == 4) {
					return '好';
				} else if (index == 5) {
					return '极好';
				}
			}
		}
	};
</script>

<style>
	.icon-fav {
		width: 1rem;
		display: inline-block;
		margin-left: 0.3rem;
		vertical-align: middle;
	}

	.edgeInsetBottom {
		height: 100rpx;
		height: calc(var(--window-bottom) + 100rpx);
	}

	.wanlian.cu-bar.tabbar {
		background-color: #F7F7F7;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>